<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    @close="closeDialog"
    custom-class="dialog-minwidth"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="IP地址：" prop="ip">
        <el-input
          placeholder="请输入IP地址"
          clearable
          v-model="ruleForm.ip"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input
          type="textarea"
          :rows="2"
          :maxlength="100"
          placeholder="请输入备注"
          show-word-limit
          v-model="ruleForm.remark"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="closeDialog" class="cancel">取 消</el-button>
      <el-button
        type="primary"
        class="save"
        @click.native="saveAddIp('ruleForm')"
        :loading="loading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'WhiteListDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogType: {
      type: String,
      default: '',
    },
    whiteListDetail: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      dialogTitle: '',
      ruleForm: {
        ip: '',
        status: '',
        remark: '',
      },
      rules: {
        ip: [
          {
            required: true,
            message: '请输入IP地址',
            trigger: 'blur',
          },
          {
            pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)($|(?!\.$)\.)){4}$/,
            message: '请输入正确的IP地址',
            trigger: 'blur',
          },
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change',
          },
        ],
        remark: [
          {
            required: true,
            message: '请输入备注',
            trigger: 'blur',
          },
        ],
      },
      loading: false,
    }
  },
  created() {
    this.dialogTitle =
      this.dialogType === 'add' ? '添加IP白名单' : '修改IP白名单'
    if (this.dialogType === 'edit') {
      this.ruleForm = this.whiteListDetail
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    },
    saveAddIp(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let method = 'post'
          let data = this.ruleForm
          if (this.dialogType === 'edit') {
            Object.assign(data, { id: this.whiteListDetail.id })
            method = 'put'
          }
          return this.axios({
            method,
            url: 'api-m/whiteIP',
            data,
            headers: {
              'Content-Type': 'application/json',
            },
          })
            .then((response) => {
              this.loading = false
              if (!response.data.hasError) {
                this.$message.success('操作成功')
                this.$emit('closeDialog', 'update')
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
            .catch((error) => {
              this.loading = false
              if (error.response) {
                this.$message.error(error.response.data)
              }
            })
        } else {
          this.$message.error('请按照提示规则输入内容!')
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="less"></style>
